<template>
	<view class="content ">
		<view class="wrap "><u-swiper :list="slides" title name="img_url"></u-swiper></view>
		<view class="tabs u-margin-top-40"><u-tabs :list="tab_list" :is-scroll="false" :current="currentSort" @change="change"></u-tabs></view>
		<u-row gutter="16" class="u-skeleton">
			<u-col span="6" v-for="item in goodsList.length !== 0 ? goodsList : [{}, {}, {}, {}]" :key="item.index"><goods-card :goods="item"></goods-card></u-col>
		</u-row>

		<!-- 骨架屏 -->
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tab_list: [
				{
					name: '默认'
				},
				{
					name: '销量'
				},
				{
					name: '推荐',
					count: 5
				},
				{
					name: '最新'
				}
			],
			currentSort: 0,
			slides: [],
			goodsList: [],
			page: 1,
			loading: false
		};
	},
	onLoad() {
		//测试代码
		// const currentPage = getCurrentPages().pop();
		// const options = currentPage.options; //id=1

		// //参数的key
		// const optionsKeys = Object.keys(options); //id['id']
		// let params = '';
		// if (optionsKeys.length !== 0) {
		// 	params = optionsKeys
		// 		.reduce((pre, current) => {
		// 			return pre + current + '=' + options[current] + '&';
		// 		}, '?')
		// 		.slice(0, -1);
		// }

		

		this.getData();
	},
	methods: {
		change(index) {
			// console.log(index)
			this.currentSort = index;
			//重置商品数据和分页
			this.goodsList = [];
			this.getData();
		},
		//获取数据
		async getData() {
			this.loading = true;
			const params = {
				page: this.page
			};
			if (this.currentSort == 1) params.sales = 1;
			if (this.currentSort == 2) params.recommend = 1;
			if (this.currentSort == 3) params.new = 1;
			const res = await this.$u.api.index(params);
			this.loading = false; //隐藏骨架屏
			this.slides = res.slides;
			this.goodsList = [...this.goodsList, ...res.goods.data];
		}
	},
	onReachBottom() {
		//到达底部触发
		//重新请求数据
		this.page = this.page + 1;
		this.getData(this.page);
		// console.log(this.page)
	}
};
</script>

<style lang="scss" scoped>
.content {
}

.wrap {
	padding: 40rpx 0 0;
}
</style>
